.section {
  padding: 4rem 0 0 0;
  text-align: center;
}

.logoContainer {
  display: flex;
  flex-wrap: nowrap;
  column-gap: 4rem;
  align-items: center;
  justify-content: center;
  overflow-x: auto;
}

.logoContainer img {
  max-width: 150px;
}

.codeExample {
  flex: 1;
  max-width: 50%;
}

.codeExample div {
  text-align: left;
}

.codeBlock {
  font-size: 0.8rem;
}

.webviewExample {
  flex: 1;
  justify-self: start;
}

.configToWebview {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: start;
  margin-top: 4rem;
  margin-bottom: 2rem;
  gap: 1rem;

  font-size: var(--ifm-h2-font-size);
}

@media (max-width: 723px) {
  .logoContainer {
    margin-top: 4rem;
  }

  .configToWebview {
    flex-direction: column;
  }

  .codeExample {
    max-width: 100%;
  }
}
